<template>
	<div class="content">
		<div class="conttitle">
			<div style="height: 100%;">
				<div style="margin-top: 10px;" class="name"><span>剑魂</span><span>本人</span></div>
				<div style="margin-top: 20px;" class="phone">622*********0909</div>
			</div>
			<div style="margin-top: 20px;" class="mor"  @click='change'>
				<div style="" class="name"><img src="@/static/cut.png" alt="" style="width: 20px;height: 20px;"></div>
				<div style="" class="phone">切换就诊人</div>
			</div>
		</div>
		<div class="timezou">
			<div class="lasttime">近一年</div>
			<div class="choosetime" @click='time'>选择时间
			<img src="@/static/san.png" alt="" style="width: 10px;height: 10px;vertical-align: middle;margin-left: 3px;">
			</div>
		</div>
				<div class="cart" style="margin-top: 20px;" >
					<div style="width: 100%;">
						<div style="width: 100%;" @click='nucleicaciddetail'>
							<div class="godname" style="padding: 10px 0px; border-bottom: 1px solid #f5f5f5;width: 100%; display: flex;justify-content: space-between;align-items: center;"><div>新型冠状病毒核酸检测（咽拭子）</div><div style="color: #006EFF;font-size: 12px;">已完成</div></div>
							<div class="godhospname"><span style="width: 60px;display: inline-block;">就诊科室</span> <span style="color: #6c6c6c;margin-left: 5px;">保健室</span></div>
							<div class="godhospname"><span style="width: 60px;display: inline-block;">就诊时间</span><span style="color: #6c6c6c;margin-left: 5px;">2020年10月5日 10:50</span></div>
							<div class="godhospname"><span style="width: 60px;display: inline-block;margin-bottom: 5px;">就诊人</span><span style="color: #6c6c6c;margin-left: 5px;">王敏</span></div>
						</div>
<!-- 						<div style="display: flex;justify-content: flex-end;padding: 10px 0px;border-top: 1px solid #f5f5f5;z-index: 999;"><div class="button" style="z-index: 999;" @click='look'>查看报告</div></div> -->
					</div>
				</div>
				<div class="cart" style="margin-top: 20px;" >
					<div style="width: 100%;">
						<div style="width: 100%;" @click='nucleicaciddetail'>
							<div class="godname" style="padding: 10px 0px; border-bottom: 1px solid #f5f5f5;width: 100%; display: flex;justify-content: space-between;align-items: center;"><div>新型冠状病毒核酸检测（咽拭子）</div><div style="color: #006EFF;font-size: 12px;">已完成</div></div>
							<div class="godhospname"><span style="width: 60px;display: inline-block;">就诊科室</span> <span style="color: #6c6c6c;margin-left: 5px;">保健室</span></div>
							<div class="godhospname"><span style="width: 60px;display: inline-block;">就诊时间</span><span style="color: #6c6c6c;margin-left: 5px;">2020年10月5日 10:50</span></div>
							<div class="godhospname"><span style="width: 60px;display: inline-block;margin-bottom: 5px;">就诊人</span><span style="color: #6c6c6c;margin-left: 5px;">王敏</span></div>
						</div>
						<view style="width: 100%;height: 250px;position: fixed;background-color: #ffffff;margin-left: -32px;bottom: -250px;z-index: 989;" :animation="animationData">
							<div style="position: absolute; top: 7%;right: 10%;"><img src="@/static/icon-close.png" alt="" style="width: 15px;height: 15px;" @click='close'></div>
							<div style="width: 100%;text-align: center;font-size: 17px;margin-top: 10px;">选择就诊人</div>
							<div style="display: flex;padding: 20px;align-items: center;border-bottom: 1px solid #f2f2f2;">
								<div style="height: 100%;width: 100%;" @click='close'>
									<div style="margin-top: 10px;" class="name"><span>剑魂</span><span>本人</span></div>
									<div style="margin-top: 20px;" class="phone">622*********0909</div>
								</div>
								<div style="margin-top: 20px;" class="mor">
									<div style="" class="name"><img src="@/static/addmore.png" alt="" style="width: 10px;height: 10px;"></div>
								</div>
							</div>
							<div style="display: flex;padding: 20px;align-items: center;border-bottom: 1px solid #f2f2f2;">
								<div style="height: 100%;width: 100%;"  @click='close'>
									<div style="margin-top: 10px;" class="name"><span>剑魂</span><span>本人</span></div>
									<div style="margin-top: 20px;" class="phone">622*********0909</div>
								</div>
								<div style="margin-top: 20px;" class="mor">
									<div style="" class="name"><img src="@/static/addmore.png" alt="" style="width: 10px;height: 10px;"></div>
								</div>
							</div>
						</view>
						<view style="width: 100%;height: 300px;position: fixed;background-color: #ffffff;margin-left: -32px;bottom: -300px;z-index: 989;" :animation="animationData1">
							   <view style="display: flex;justify-content: space-between;padding: 20px; border-bottom: 1px solid #f2f2f2;margin-bottom: 20px;">
							   	<div style="color: #AAAAAA;font-size: 15px;z-index: 999;" @click='clopp'>取消</div>
							   	<div style="color: #006EFF;font-size: 15px;z-index: 999;" @click='allover'>确定</div>
							   </view>
							   <view style="display: flex;justify-content: center;">
									<div style="width: 125px;height: 32px;text-align: center;line-height: 32px;" :class="zp[0]" @click='choosetime(0)'>{{year1}}年{{month1}}月{{day1}}日</div>
									<div style="width: 35px;height: 32px;text-align: center;line-height: 32px;">至</div>
									<div style="width: 125px;height: 32px;text-align: center;line-height: 32px;" :class="zp[1]" @click='choosetime(1)'>{{year2}}年{{month2}}月{{day2}}日</div>
							   </view>
								<view>
							        <picker-view v-if="visible" :indicator-style="indicatorStyle" :value="value" @change="bindChange" class="picker-view">
							            <picker-view-column>
							                <view class="item" v-for="(item,index) in years" :key="index">{{item}}</view>
							            </picker-view-column>
							            <picker-view-column>
							                <view class="item" v-for="(item,index) in months" :key="index">{{item}}</view>
							            </picker-view-column>
							            <picker-view-column>
							                <view class="item" v-for="(item,index) in days" :key="index">{{item}}</view>
							            </picker-view-column>
							        </picker-view>
							    </view>
						</view>
						<div style="display: flex;justify-content: flex-end;padding: 10px 0px;border-top: 1px solid #f5f5f5;z-index: 999;"><div class="button" style="z-index: 900;" @click='look'>查看报告</div></div>
						<div style="width: 100%;padding: 100%;position: fixed;background-color: #666666;z-index: 888;top: 0;margin-left: -32px;opacity: .5;" v-show="show" ></div>
						
					</div>
				</div>
		
	</div>
</template>

<script>
	export default{
		onShow() {
			let zfdata=new Date()
			this.year1=zfdata.getFullYear()
			this.month1=zfdata.getMonth() + 1
			this.day1=zfdata.getDate()
			this.year2=zfdata.getFullYear()
			this.month2=zfdata.getMonth() + 1
			this.day2=zfdata.getDate()
		},

			data(){
				const date = new Date()
				            const years = []
				            const year = date.getFullYear()
				            const months = []
				            const month = date.getMonth() + 1
				            const days = []
				            const day = date.getDate()
				            for (let i = 1990; i <= date.getFullYear(); i++) {
				                years.push(i)
				            }
				            for (let i = 1; i <= 12; i++) {
				                months.push(i)
				            }
				            for (let i = 1; i <= 31; i++) {
				                days.push(i)
				            }
			return{
				month1:'1',
				year1:'1',
				day1:'1',
				month2:'1',
				year2:'1',
				day2:'1',
				zp:['blue','skyblue'],
				  title: 'picker-view',
				                years,
				                year,
				                months,
				                month,
				                days,
				                day,
				                value: [9999, month - 1, day - 1],
				                visible: true,
				                indicatorStyle: `height: 50px;`,
				animationData: {},
				animationData1:{},
				show:false
			}
		},methods:{
			nucleicaciddetail(){
				uni.navigateTo({
					url:"./nucleicaciddetail"
				})
			},look(){
				uni.navigateTo({
					url:'./reportnu'
				})
			},allover(){
					if(this.year1<=this.year2){
						if(this.month1<=this.month2){
							if(this.day1<=this.day2){
								var animation = uni.createAnimation({
								  duration: 1000,
								    timingFunction: 'ease',
								})
													
								this.animation = animation
													
								animation.translateY(0).step()
													
								this.animationData1 = animation.export()
								this.show=false
							}
						}
					}else{
						uni.showToast({
							icon:'none',
							title:'时间选择错误'
						})
					}
				},
				clopp(){
					var animation = uni.createAnimation({
					  duration: 1000,
					    timingFunction: 'ease',
					})
										
					this.animation = animation
										
					animation.translateY(0).step()
										
					this.animationData1 = animation.export()
					this.show=false
				},
				choosetime(index){
					this.zp=['skyblue','skyblue']
					this.zp[index]='blue'
				},
				time(){
					console.log(1)
					    var animation = uni.createAnimation({
					      duration: 1000,
					        timingFunction: 'ease',
					    })
					
					    this.animation = animation
					
					    animation.translateY(-301).step()
					
					    this.animationData1 = animation.export()
						this.show=true
				},
				            bindChange: function (e) {
				                const val = e.detail.value
				                this.year = this.years[val[0]]
				                this.month = this.months[val[1]]
				                this.day = this.days[val[2]]
								if(this.zp[0]=='blue'){
									this.year1=this.year
									this.month1=this.month
									this.day1=this.day
								}else{
									this.year2=this.year
									this.month2=this.month
									this.day2=this.day
								}
				            },
				close(){
					console.log(1)
					    var animation = uni.createAnimation({
					      duration: 1000,
					        timingFunction: 'ease',
					    })
					
					    this.animation = animation
					
					    animation.translateY(0).step()
					
					    this.animationData = animation.export()
						this.show=false
				},
				physicalexaminationreport(){
					uni.navigateTo({
						url:'./physicalexaminationreport'
					})
				},
				nucleicaciddetail(){
					uni.navigateTo({
						url:'../../../subscribe/pages/nucleicacid/nucleicaciddetail'
					})
				},change(){
					console.log(1)
					    var animation = uni.createAnimation({
					      duration: 1000,
					        timingFunction: 'ease',
					    })
					
					    this.animation = animation
					
					    animation.translateY(-251).step()
					
					    this.animationData = animation.export()
						this.show=true
				},disnone(){
					var animation = uni.createAnimation({
					  duration: 1000,
					    timingFunction: 'ease',
					})
										
					this.animation = animation
										
					animation.translateY(-1).step()
										
					this.animationData = animation.export()
					this.show=false
				}
		}
	}
</script>
	
<style>
	.blue{
			background-color: #006eff;
			color: #d8e4f3;
			font-size: 12px;
		}
		.skyblue{
			background-color: #e6f1ff;
			color: #4797ff;
			font-size: 12px;
		}
			.picker-view {
				width: 750rpx;
				height: 600rpx;
				margin-top: 20rpx;
			}
			.item {
				line-height: 100rpx;
				text-align: center;
			}
		.button{
	    font-family: 'PingFangHK-Medium', 'PingFang HK Medium', 'PingFang HK', sans-serif;
	    font-weight: 500;
	    font-style: normal;
	    font-size: 12px;
	    color: #FFFFFF;
	    line-height: 32px;
				background-color: rgba(0, 110, 255, 1);
				width: 80px;
				    height: 32px;
					text-align: center;
					border-radius: 5px;
					
		}
	.money{
			font-family: 'PingFangSC-Medium', 'PingFang SC Medium', 'PingFang SC', sans-serif;
			    font-weight: 500;
			    font-style: normal;
			    font-size: 17px;
			    color: #F46363;
		}
		.gomove{
			margin-top: 10px;
			border-radius: 5px;
			width: 72px;
			    height: 32px;
				font-family: 'PingFangHK-Medium', 'PingFang HK Medium', 'PingFang HK', sans-serif;
				    font-weight: 500;
				    font-style: normal;
				    color: #FFFFFF;
				    line-height: 20px;
					background-color: #006EFF;
					font-size: 14px;
					line-height: 32px;
					text-align: center;
		}
		.godname{
			font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
			    font-weight: 400;
			    font-style: normal;
			    font-size: 15px;
			    color: #555555;
				margin: 5px 0;
		}
		.godhospname{
			font-family: 'PingFangSC-Light', 'PingFang SC Light', 'PingFang SC', sans-serif;
			    font-weight: 200;
			    font-style: normal;
			    font-size: 12px;
			    color: #AAAAAA;
							margin: 5px 0;
				
		}
		.cart{
			margin-bottom: 20px;
			padding: 0px 15px;
			border: 1px solid #f2f2f2;
			display: flex;
			justify-content: space-between;
		}
		.choose{
			display: flex;
		}
		.zoi {
			flex: 1;
			background-color: #f2f2f2;
			color: #5c5c5c;
			line-height: 48px;
			margin: 0 10px;
			text-align: center;
			border-radius: 10px;
		}
		.zoif {
			flex: 1;
			background-color: #e3efff;
			color: #0e75ff;
			border: 1px solid #006eff;
			border-radius: 10px;
			line-height: 48px;
			margin: 0 10px;
			text-align: center;
		}
		.h1 {
			margin: 20px 0px;
			font-family: 'PingFangSC-Medium', 'PingFang SC Medium', 'PingFang SC', sans-serif;
			    font-weight: 500;
			    font-style: normal;
			    font-size: 17px;	
		}
		.balance div:nth-child(1){
			font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
			    font-weight: 400;
			    font-style: normal;
			    font-size: 15px;
			    color: #555555;
		}
		.balance div:nth-child(2){
			font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
			    font-weight: 400;
			    font-style: normal;
			    font-size: 18px;
			    color: #555555;
		}
		.balance{
			padding: 0 15px;
			margin-top: 10px;
			height: 70px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border: 1px solid #f2f2f2;
			background-color: #ffffff;
		}
		.mor {
			font-family: 'PingFangSC-Light', 'PingFang SC Light', 'PingFang SC', sans-serif;
			    font-weight: 200;
			    font-style: normal;
				text-align: center;
			    font-size: 12px;
		}
		.phone {
			margin-top: 10px;
			    font-weight: 200;
			    font-style: normal;
			    font-size: 12px;
			    color: #AAAAAA;
		}
		.name span:nth-child(1){
			font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
			    font-weight: 400;
			    font-style: normal;
			    font-size: 15px;
			    color: #555555;
		}
		.name span:nth-child(2) {
			margin-left: 5px;
			font-size: 12px;
			display: inline-block;
			width: 44px;
			height: 18px;
			padding: 2px;
			background-color: #e2edfe;
			text-align: center;
			line-height: 18px;
			border-radius: 10px;
			letter-spacing: 1px;
			color: #006EFF;
		}
		.conttitle{
			background-color: #f5f9ff;
			height: 80px;
			display: flex;
			font-weight: 200;
			border: 1px solid #f2f2f2;
			padding: 20px 15px;
			justify-content: space-between;
			margin-top: 15px;
		}
		.content {
			padding: 30px 15px;
		}
		.choosetime{
			padding: 5px 10px;
			font-family: 'PingFangSC-Thin', 'PingFang SC Thin', 'PingFang SC', sans-serif;
			    font-weight: 200;
			    font-style: normal;
			    font-size: 12px;
			    letter-spacing: 1px;
				color: #4998ff;
				background-color: #e4f0ff;
				border-radius: 15px;
				margin-left: 15px;
		}
		.lasttime{
			padding: 5px 10px;
	    font-family: 'PingFangSC-Thin', 'PingFang SC Thin', 'PingFang SC', sans-serif;
	    font-weight: 200;
	    font-style: normal;
	    font-size: 12px;
	    letter-spacing: 1px;
	    color: #f5f9ff;
		background-color: #006eff;
		border-radius: 15px;
		
		}
		.timezou{
			display: flex;
			margin-top: 15px;
		}
		.dingmember {
	
			font-family: "Arial Negreta", "Arial Normal", Arial, sans-serif;
			    font-weight: 700;
			    font-style: normal;
			    font-size: 41px;
			    color: rgb(255, 255, 255);
			    text-align: center;
			    line-height: 40px;
		}
		.ding {
					margin-bottom: 10px;
			font-family: 'PingFangSC-Thin', 'PingFang SC Thin', 'PingFang SC', sans-serif;
			    font-weight: 200;
				letter-spacing: 1.7px;
				font-style: normal;
				    font-size: 13px;
					color: #ffffff;
		}
		.order{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin: 20px auto;
			background-color: #f9972b;
			width: 160px;
			height: 160px;
			border-radius: 160px;
			text-align: center;
		}
		.name{
			color: #AAAAAA;
			font-family: PingFangSC-Light, "PingFang SC Light", "PingFang SC", sans-serif;
			    font-weight: 200;
			    font-style: normal;
			    font-size: 14px;
				margin-right: 15px;
		}
		.name1{
			font-family: PingFangSC-Light, "PingFang SC Light", "PingFang SC", sans-serif;
			    font-weight: 200;
			    font-style: normal;
			    font-size: 14px;
		}
		.choose{
			display: flex;
		}
		.zoi {
			flex: 1;
			background-color: #f2f2f2;
			color: #5c5c5c;
			line-height: 48px;
			margin: 0 10px;
			text-align: center;
			border-radius: 10px;
		}
		.zoif {
			flex: 1;
			background-color: #e3efff;
			color: #0e75ff;
			border: 1px solid #006eff;
			border-radius: 10px;
			line-height: 48px;
			margin: 0 10px;
			text-align: center;
		}
		.h1 {
			margin: 20px 0px;
			font-family: 'PingFangSC-Medium', 'PingFang SC Medium', 'PingFang SC', sans-serif;
			    font-weight: 500;
			    font-style: normal;
			    font-size: 17px;	
		}
		.balance div:nth-child(1){
			font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
			    font-weight: 400;
			    font-style: normal;
			    font-size: 15px;
			    color: #555555;
		}
		.balance div:nth-child(2){
			font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
			    font-weight: 400;
			    font-style: normal;
			    font-size: 18px;
			    color: #555555;
		}
		.balance{
			padding: 0 15px;
			margin-top: 10px;
			height: 70px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border: 1px solid #f2f2f2;
			background-color: #ffffff;
		}
		.mor {
			font-family: 'PingFangSC-Light', 'PingFang SC Light', 'PingFang SC', sans-serif;
			    font-weight: 200;
			    font-style: normal;
				text-align: center;
			    font-size: 12px;
		}
		.phone {
			margin-top: 10px;
			    font-weight: 200;
			    font-style: normal;
			    font-size: 12px;
			    color: #AAAAAA;
		}
		.name span:nth-child(1){
			font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
			    font-weight: 400;
			    font-style: normal;
			    font-size: 15px;
			    color: #555555;
		}
		.name span:nth-child(2) {
			margin-left: 5px;
			font-size: 12px;
			display: inline-block;
			width: 44px;
			height: 18px;
			padding: 2px;
			background-color: #e2edfe;
			text-align: center;
			line-height: 18px;
			border-radius: 10px;
			letter-spacing: 1px;
			color: #006EFF;
		}
		.conttitle{
			background-color: #f5f9ff;
			height: 80px;
			display: flex;
			font-weight: 200;
			border: 1px solid #f2f2f2;
			padding: 20px 10px;
			justify-content: space-between;
			margin-top: 15px;
		}
		.content {
			padding: 30px 15px;
		}
	.button{
    font-family: 'PingFangHK-Medium', 'PingFang HK Medium', 'PingFang HK', sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 12px;
    color: #FFFFFF;
    line-height: 32px;
			background-color: rgba(0, 110, 255, 1);
			width: 80px;
			    height: 32px;
				text-align: center;
				border-radius: 5px;
				
	}
.money{
		font-family: 'PingFangSC-Medium', 'PingFang SC Medium', 'PingFang SC', sans-serif;
		    font-weight: 500;
		    font-style: normal;
		    font-size: 17px;
		    color: #F46363;
	}
	.gomove{
		margin-top: 10px;
		border-radius: 5px;
		width: 72px;
		    height: 32px;
			font-family: 'PingFangHK-Medium', 'PingFang HK Medium', 'PingFang HK', sans-serif;
			    font-weight: 500;
			    font-style: normal;
			    color: #FFFFFF;
			    line-height: 20px;
				background-color: #006EFF;
				font-size: 14px;
				line-height: 32px;
				text-align: center;
	}
	.godname{
		font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
		    font-weight: 400;
		    font-style: normal;
		    font-size: 15px;
		    color: #555555;
			margin: 5px 0;
	}
	.godhospname{
		font-family: 'PingFangSC-Light', 'PingFang SC Light', 'PingFang SC', sans-serif;
		    font-weight: 200;
		    font-style: normal;
		    font-size: 12px;
		    color: #AAAAAA;
						margin: 5px 0;
			
	}
	.cart{
		margin-bottom: 20px;
		padding: 0px 15px;
		border: 1px solid #f2f2f2;
		display: flex;
		justify-content: space-between;
	}
	.choose{
		display: flex;
	}
	.zoi {
		flex: 1;
		background-color: #f2f2f2;
		color: #5c5c5c;
		line-height: 48px;
		margin: 0 10px;
		text-align: center;
		border-radius: 10px;
	}
	.zoif {
		flex: 1;
		background-color: #e3efff;
		color: #0e75ff;
		border: 1px solid #006eff;
		border-radius: 10px;
		line-height: 48px;
		margin: 0 10px;
		text-align: center;
	}
	.h1 {
		margin: 20px 0px;
		font-family: 'PingFangSC-Medium', 'PingFang SC Medium', 'PingFang SC', sans-serif;
		    font-weight: 500;
		    font-style: normal;
		    font-size: 17px;	
	}
	.balance div:nth-child(1){
		font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
		    font-weight: 400;
		    font-style: normal;
		    font-size: 15px;
		    color: #555555;
	}
	.balance div:nth-child(2){
		font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
		    font-weight: 400;
		    font-style: normal;
		    font-size: 18px;
		    color: #555555;
	}
	.balance{
		padding: 0 15px;
		margin-top: 10px;
		height: 70px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border: 1px solid #f2f2f2;
		background-color: #ffffff;
	}
	.mor {
		font-family: 'PingFangSC-Light', 'PingFang SC Light', 'PingFang SC', sans-serif;
		    font-weight: 200;
		    font-style: normal;
			text-align: center;
		    font-size: 12px;
	}
	.phone {
		margin-top: 10px;
		    font-weight: 200;
		    font-style: normal;
		    font-size: 12px;
		    color: #AAAAAA;
	}
	.name span:nth-child(1){
		font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
		    font-weight: 400;
		    font-style: normal;
		    font-size: 15px;
		    color: #555555;
	}
	.name span:nth-child(2) {
		margin-left: 5px;
		font-size: 12px;
		display: inline-block;
		width: 44px;
		height: 18px;
		padding: 2px;
		background-color: #e2edfe;
		text-align: center;
		line-height: 18px;
		border-radius: 10px;
		letter-spacing: 1px;
		color: #006EFF;
	}
	.conttitle{
		background-color: #f5f9ff;
		height: 80px;
		display: flex;
		font-weight: 200;
		border: 1px solid #f2f2f2;
		padding: 20px 15px;
		justify-content: space-between;
		margin-top: 15px;
	}
	.content {
		padding: 30px 15px;
	}
	.choosetime{
		padding: 5px 10px;
		font-family: 'PingFangSC-Thin', 'PingFang SC Thin', 'PingFang SC', sans-serif;
		    font-weight: 200;
		    font-style: normal;
		    font-size: 12px;
		    letter-spacing: 1px;
			color: #4998ff;
			background-color: #e4f0ff;
			border-radius: 15px;
			margin-left: 15px;
	}
	.lasttime{
		padding: 5px 10px;
    font-family: 'PingFangSC-Thin', 'PingFang SC Thin', 'PingFang SC', sans-serif;
    font-weight: 200;
    font-style: normal;
    font-size: 12px;
    letter-spacing: 1px;
    color: #f5f9ff;
	background-color: #006eff;
	border-radius: 15px;
	
	}
	.timezou{
		display: flex;
		margin-top: 15px;
	}
	.dingmember {

		font-family: "Arial Negreta", "Arial Normal", Arial, sans-serif;
		    font-weight: 700;
		    font-style: normal;
		    font-size: 41px;
		    color: rgb(255, 255, 255);
		    text-align: center;
		    line-height: 40px;
	}
	.ding {
				margin-bottom: 10px;
		font-family: 'PingFangSC-Thin', 'PingFang SC Thin', 'PingFang SC', sans-serif;
		    font-weight: 200;
			letter-spacing: 1.7px;
			font-style: normal;
			    font-size: 13px;
				color: #ffffff;
	}
	.order{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin: 20px auto;
		background-color: #f9972b;
		width: 160px;
		height: 160px;
		border-radius: 160px;
		text-align: center;
	}
	.name{
		color: #AAAAAA;
		font-family: PingFangSC-Light, "PingFang SC Light", "PingFang SC", sans-serif;
		    font-weight: 200;
		    font-style: normal;
		    font-size: 14px;
			margin-right: 15px;
	}
	.name1{
		font-family: PingFangSC-Light, "PingFang SC Light", "PingFang SC", sans-serif;
		    font-weight: 200;
		    font-style: normal;
		    font-size: 14px;
	}
	.choose{
		display: flex;
	}
	.zoi {
		flex: 1;
		background-color: #f2f2f2;
		color: #5c5c5c;
		line-height: 48px;
		margin: 0 10px;
		text-align: center;
		border-radius: 10px;
	}
	.zoif {
		flex: 1;
		background-color: #e3efff;
		color: #0e75ff;
		border: 1px solid #006eff;
		border-radius: 10px;
		line-height: 48px;
		margin: 0 10px;
		text-align: center;
	}
	.h1 {
		margin: 20px 0px;
		font-family: 'PingFangSC-Medium', 'PingFang SC Medium', 'PingFang SC', sans-serif;
		    font-weight: 500;
		    font-style: normal;
		    font-size: 17px;	
	}
	.balance div:nth-child(1){
		font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
		    font-weight: 400;
		    font-style: normal;
		    font-size: 15px;
		    color: #555555;
	}
	.balance div:nth-child(2){
		font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
		    font-weight: 400;
		    font-style: normal;
		    font-size: 18px;
		    color: #555555;
	}
	.balance{
		padding: 0 15px;
		margin-top: 10px;
		height: 70px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border: 1px solid #f2f2f2;
		background-color: #ffffff;
	}
	.mor {
		font-family: 'PingFangSC-Light', 'PingFang SC Light', 'PingFang SC', sans-serif;
		    font-weight: 200;
		    font-style: normal;
			text-align: center;
		    font-size: 12px;
	}
	.phone {
		margin-top: 10px;
		    font-weight: 200;
		    font-style: normal;
		    font-size: 12px;
		    color: #AAAAAA;
	}
	.name span:nth-child(1){
		font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
		    font-weight: 400;
		    font-style: normal;
		    font-size: 15px;
		    color: #555555;
	}
	.name span:nth-child(2) {
		margin-left: 5px;
		font-size: 12px;
		display: inline-block;
		width: 44px;
		height: 18px;
		padding: 2px;
		background-color: #e2edfe;
		text-align: center;
		line-height: 18px;
		border-radius: 10px;
		letter-spacing: 1px;
		color: #006EFF;
	}
	.conttitle{
		background-color: #f5f9ff;
		height: 80px;
		display: flex;
		font-weight: 200;
		border: 1px solid #f2f2f2;
		padding: 20px 10px;
		justify-content: space-between;
		margin-top: 15px;
	}
	.content {
		padding: 30px 15px;
	}
</style>